<template>
<view class="loading"> 
	<view v-if="loadingState.loading" class="loading-icon">
		<image v-if="icon=='white'" src="@/static/images/load_icon_white.gif" mode="widthFix" class="loading-img"></image>
		<image v-else src="@/static/images/load_icon.gif" mode="widthFix" class="loading-img"></image>
	</view>
	<view v-if="loadingState.default" class="loading-default">
		<view class="loading-icon">
			<image v-if="icon=='white'" src="@/static/images/load_icon_white.gif" mode="widthFix" class="loading-img"></image>
			<image v-else src="@/static/images/load_icon.gif" mode="widthFix" class="loading-img"></image>
		</view>		
		<view class="loading-text">数据加载中...</view>
	</view>
	<view v-if="loadingState.completed" class="loading-text">没有更多数据了...</view>
</view>
</template>

<script>
export default{
	name:'loading',
	data(){
		return {
			
		}
	},
	props:{
		loadingState:{
			type:Object
		},
		icon:{
			type:String
		}
	}
}
</script>

<style lang="less">
 
.loading-default{
	padding:30rpx;
	.loading-icon{
		padding-bottom:0;
	}
}
.loading-text{
	padding:10rpx 0 20rpx;
	text-align: center;
	font-size:28rpx;
	color:#999;
}
.loading-icon{
	text-align: center;
	padding:0 0 20rpx;
	.loading-img{
		width:36rpx;
	}
} 
</style>


